<!--
  用户管理页面
-->
<template>
  <div class="leave-manager">
    <table-search @searchBack="serachTableData" placeholder="请输入请假事由">
      <Button type="primary" @click="addLeave">请假</Button>
    </table-search>
    <div class="table-content">
      <Table :columns="columns" height="520" :data="tableData"></Table>
    </div>
    <div class="foot-center">
      <Page :total="page.total"
            :current="page.current"
            :page-size="page.size"
            @on-change="pageChange"
            @on-page-size-change="sizeChange"
            show-sizer
            show-total/>
    </div>
    <Modal
      v-model="modal.show"
      :title="modal.title"
      :width="modal.width"
      scrollable
      @on-cancel="closeModal"
      class="modal-area"
      footer-hide
    >
      <div class="modal-h50">
        <leave-form ref="leaveForm" :businessId="modal.businessId"
                    v-if="['leaveView','leaveAdd'].indexOf(modal.type)!==-1"
                    :disabled="modal.type==='leaveView'"></leave-form>
        <Tabs value="records" v-if="modal.type==='auditRecords'">
          <TabPane label="审核记录" name="records" class="tab-height400">
            <audit-records :businessId="modal.businessId"></audit-records>
          </TabPane>
          <TabPane label="流程图" v-if="processObject.processInstanceId" name="auditImg" class="tab-height400">
            <audit-img :processObject="processObject"></audit-img>
          </TabPane>
        </Tabs>
      </div>
      <div class="modal-btn" v-if="modal.type==='leaveAdd'">
        <Button @click="closeModal">取消</Button>
        <Button type="primary" @click="saveLeave(1)">确定</Button>
        <Button type="success" @click="saveLeave(2)" ghost>提交</Button>
      </div>
    </Modal>
  </div>


</template>

<script>
import * as API from "@/api/sys-leave.js";
import tableSearch from "_c/table-components/table-search"
import leaveForm from "./sys-leave-form"
import auditRecords from "_c/activiti/audit-records"
import auditImg from "_c/activiti/audit-img"
import {recallProcess} from "../../api/bpmn-api";

export default {
  name: "leave-add",
  components: {tableSearch, leaveForm, auditRecords,auditImg},
  data() {
    return {
      modal: {
        show: false,
        title: "",
        type: "",
        businessId: "",
      },
      processObject:{},
      page: {
        total: 0,
        current: 1,
        size: 10
      },
      columns: [
        {
          title: '请假事由',
          align: "center",
          tooltip: true,
          key: 'reason',
          minWidth: 200,
        },
        {
          title: '请假类型',
          align: "center",
          width: 180,
          key: 'type'
        },
        {
          title: '请假开始时间',
          align: "center",
          width: 200,
          key: 'startTime'
        },
        {
          title: '请假结束时间',
          align: "center",
          width: 200,
          key: 'endTime'
        },
        {
          title: '请假天数',
          align: "center",
          width: 180,
          key: 'days'
        },
        {
          title: '状态',
          align: "auditStatus",
          width: 120,
          render: (h, params) => {
            let colorStr, textStr;
            switch (params.row.auditStatus) {
              case "1":
                colorStr = "cyan"
                textStr = "审核中"
                return h('div', [
                  h('Tooltip', {
                    props: {
                      placement: 'top',
                      transfer: true
                    }
                  }, [
                    h('Tag', {
                      props: {
                        color: colorStr
                      },
                      nativeOn: {
                        click: () => {
                           this.viewAuditRecords(params.row)
                        }
                      }
                    }, textStr),
                    params.row.auditStatus === '1' ? h('span', {
                      slot: 'content',
                    }, [h('p', "审核人:" + params.row.auditor)]) : null
                  ])
                ]);
                break;
              case "2":
                colorStr = "green"
                textStr = "已通过"
                break;
              case "3":
                colorStr = "red"
                textStr = "未通过"
                break;
              case "0":
              default:
                colorStr = "default"
                textStr = "待提交"
                break;
            }
            return h('div', [
              h('Tag', {
                props: {
                  color: colorStr
                },
                nativeOn: {
                  click: () => {
                     this.viewAuditRecords(params.row)
                  }
                }
              }, textStr),
            ]);
          }
        },
        {
          title: '操作',
          align: "center",
          width: 220,
          render: (h, params) => {
            return h('div', [
              params.row.auditStatus === '3' ?
                h('Button', {
                  props: {
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.subAgain(params.row)
                    }
                  }
                }, '重新发起') : null,
              params.row.auditStatus === '1' ?
                h('Button', {
                  props: {
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.recallSub(params.row)
                    }
                  }
                }, '撤回') : null,
              !params.row.auditStatus || ['0', '3'].indexOf(params.row.auditStatus) !== -1 ?
                h('Button', {
                  props: {
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      let obj = {
                        width: 540,
                        title: "请假申请",
                        type: "leaveAdd",
                        show: true,
                        businessId: params.row.id
                      }
                      this.modal = Object.assign(this.modal, obj)
                    }
                  }
                }, '编辑') : null,
              !params.row.auditStatus || params.row.auditStatus === '0' ?
                h('Button', {
                  props: {
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.removeLeave(params.row)
                    }
                  }
                }, '删除') : null,
              h('Button', {
                props: {
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    let obj = {
                      width: 540,
                      title: "请假详情",
                      type: "leaveView",
                      show: true,
                      businessId: params.row.id
                    }
                    this.modal = Object.assign(this.modal, obj)
                  }
                }
              }, '查看'),
            ]);
          }
        },
      ],
      tableData: [],
      surePassword: "",
      searchName: "",
      leaveInfo: {
        type: "",
        startTime: "",
        endTime: 1,
        reason: "",
        days: 0,
      },
      leaveInfoRule: {}
    };
  },
  methods: {

    //查看请假审核记录
    viewAuditRecords(row) {
      this.processObject.processInstanceId=row.processInstanceId
      this.processObject.processDefinitionId=row.processDefinitionId
      let obj = {
        title: "",
        type: "auditRecords",
        width: 680,
        businessId: row.id,
        show: true
      }
      this.modal = Object.assign(this.modal, obj)
    },

    //删除请假
    removeLeave(row) {
      API.deleteLeave(row).then(res => {
        if (res.code === "0") {
          this.serachTableData()
        } else {
          this.$Message.error(res.msg);
        }
      })
    },


    //撤销流程
    recallSub(row){
      let params = Object.assign({}, row)
      recallProcess(params).then(res => {
        if (res.code === "0") {
          this.serachTableData()
        } else {
          this.$Message.error(res.msg);
        }
      })
    },

    //再次提交
    subAgain(row) {
      let params = Object.assign({}, row)
      params.saveStatus = 2
      API.saveLeaveInfo(params).then(res => {
        if (res.code === "0") {
          this.serachTableData()
        } else {
          this.$Message.error(res.msg);
        }
      })
    },


    //保存或提交请假
    saveLeave(type) {
      if (type === 2) {
        this.$Modal.confirm({
          title: '请求确认',
          content: '<p>是否确认提交请假流程？</p>',
          onOk: () => {
            let params = Object.assign({}, this.$refs.leaveForm.leaveInfo)
            params.saveStatus = type
            API.saveLeaveInfo(params).then(res => {
              if (res.code === "0") {
                this.$Message.success(res.msg);
                this.closeModal()
                this.serachTableData()
              } else {
                this.$Message.error(res.msg);
              }
            })
          },
          onCancel: () => {
          }
        });
      }else{
        let params = Object.assign({}, this.$refs.leaveForm.leaveInfo)
        params.saveStatus = type
        API.saveLeaveInfo(params).then(res => {
          if (res.code === "0") {
            this.$Message.success(res.msg);
            this.closeModal()
            this.serachTableData()
          } else {
            this.$Message.error(res.msg);
          }
        })
      }

    },
    //关闭弹窗
    closeModal() {
      let cleanModal = {
        show: false,
        title: "",
        type: "",
        businessId: "",
      }
      this.modal = Object.assign({}, cleanModal)
    },
    //跳页事件
    pageChange(page) {
      this.page.current = page
      this.getTableData()
    },
    //切换显示条数事件
    sizeChange(size) {
      this.page.current = 1
      this.page.size = size
      this.getTableData()
    },

    //搜索
    serachTableData(value) {
      this.searchName = value
      this.page.current = 1
      this.getTableData()
    },

    //选择请假时间
    changeDate(dateArr) {
      this.leaveInfo.startTime = dateArr[0]
      this.leaveInfo.endTime = dateArr[1]
    },


    //新增请假，打开弹窗
    addLeave() {
      let obj = {
        width: 540,
        title: "请假申请",
        type: "leaveAdd",
        show: true,
      }
      this.modal = Object.assign(this.modal, obj)
    },
    //获取表格数据
    getTableData() {
      API.getLeavePage({
        page: {
          current: this.page.current,
          size: this.page.size
        },
        reason: this.searchName
      }).then(res => {
        if (res.code === "0") {
          this.page.total = parseInt(res.data.total)
          this.tableData = res.data.records
        }
      })
    },
  },
  created() {
    this.getTableData()
  },
};
</script>
<style lang="less" scoped>
.leave-manager {
  width: 100%;

  .table-content {
    padding: 10px;
    text-align: center;
  }
}
</style>
